//表格数据
import { useState, useEffect, useMemo } from 'react';
import ProTable from '@/components/ProTable';
import { getColumnsData } from './ColumnConfig';
import { getFieldConfig, updateFieldConfig } from '../services';
import { debounce } from 'lodash';
import CreateAfterSales from '../components/CreateAfterSales';

const TableList = (props) => {
	const { actions, realColumns, tableList, selectKeys, headerHeight, setselectKeys, updatePageConfig, handleOk, triggerSearchCb } = props;

	const [record, setRecord] = useState({});

	const [visible, setVisible] = useState(null);

	const [imageShowConfig, setImageShowConfig] = useState({
		image: "small",
		info: ["name", "color", "goods", "style"],
		all: false
	})

	//基础信息获取
	useEffect(() => {
		getImgShowConfig();
	}, []);

	//获取图片显示配置
	const getImgShowConfig = async () => {
		const { success, data = [] } = await getFieldConfig({ code: 'imageShowConfig' });
		if (success) {
			if (data.param) {
				setImageShowConfig(JSON.parse(data.param));
			}
		}
	}

	//保存图片显示配置
	const updateImgShowConfig = (v) => {
		const params = {
			code: 'imageShowConfig',
			param: JSON.stringify(v)
		}
		updateFieldConfig(params);
	}


	//渲染展示的列
	const columns = useMemo(() => {
		return getColumnsData({
			columns: realColumns,
			actions,
			selectKeys,
			tableList,
			imageShowConfig,
			setImageShowConfig,
			updateImgShowConfig,
			triggerSearchCb,
			//单个操作
			handleSingleUpdate(id) {
				handleOk(1, [id]);
			},
			//弹框操作
			handleModalOpera(scene, record) {
				setRecord(record);
				setVisible(scene);
			}
		})
	}, [realColumns, imageShowConfig, selectKeys])

	//保存列款配置
	const saveColumnWidth = (val) => {
		realColumns.map((v, i) => {
			//忽略选择列
			v.width = val[i + 1];
		})
		updatePageConfig('columns', realColumns)
	}

	//表格组件参数
	const ProTableProps = {
		data: tableList,
		columns,
		checkOption: {
			value: selectKeys,
			selectChange(value) {
				setselectKeys(value);
			}
		},
		columnResizeOption: {
			onChangeSizes: debounce(saveColumnWidth, 1000)
		},
		style: {
			height: `calc(100vh - ${172 + headerHeight}px)`
		},
	};

	const CreateAfterSalesProps = {
		item: { ...record, scene: 'unInfoClaim'},
		handleOk() {
			handleOk(2);
			setVisible(null);
		},
		handleCancel() {
			setVisible(null);
		}
	}

	return (
		<>
			<ProTable {...ProTableProps} />
			{ visible && <CreateAfterSales { ...CreateAfterSalesProps }  />}
		</>
	)
}

export default TableList;